<template>
  <dragger @getData="getData"
           @delete-area="$emit('delete-area',obj.uniqueCode)"
           @change-area="$emit('change-area')"
           @default-layout="$emit('default-layout')"
           @update-area="(height)=>{$emit('update-area',{uniqueCode:obj.uniqueCode,height})}"
           @update-button="updateBtn"
           :obj="obj">
    <template slot="title-left">
      <div class="kuaijie-title">
        <div>
          <i class="iconfont iconfenleiguanli color-span title-span"></i>
          <span class="title-span">{{obj.name}}</span>
        </div>
      </div>
    </template>
    <template slot="content">
      <div class="kuaijie-warp"
           v-if="rk.length > 0">
        <el-button class="kuaijie-button"
                   v-for="(item,index) in rk"
                   :key="index"
                   @click="getPlatformComponentsPath($router,`${item.path}-${item.appId}&prefix=${module.filter(res=>res.id === item.appId)[0].routePrefixFront}&name=${item.name}`)">{{item.name}}</el-button>
      </div>
      <div class="kuaijie-warp no-data"
           v-else>
        <img src=""
             alt="">
        <span>暂无数据</span>
      </div>
      <el-dialog class="kuaijie-dialog"
                 title="编辑快捷入口"
                 :visible.sync="visible"
                 width="30%"
                 :before-close="close">
        <el-transfer class="trans"
                     filterable
                     v-model="value"
                     :data="data"
                     :props="{
                     label:'name',
                     key:'menuId'
                   }"
                     :titles="['未选区块', '已选区块']"
                     :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }">
          <span slot-scope="{ option }">{{option.name}}</span>
        </el-transfer>
        <span slot="footer"
              class="dialog-footer">
          <el-button type="primary"
                     @click="close(true)"
                     icon="el-icon-check"></el-button>
          <el-button @click="close"
                     icon="el-icon-close"></el-button>
        </span>
      </el-dialog>
    </template>
  </dragger>
</template>

<script>
import dragger from './dragger'
import { getQuickentry, saveQuickentry, getHasauth } from './config'
import { getPlatformComponentsPath } from '../../util/util'
import { mapGetters } from 'vuex'

export default {
  components: { dragger },
  props: {
    obj: {
      required: true,
      type: Object
    }
  },
  data () {
    return {
      getPlatformComponentsPath,
      rk: [],
      visible: false,
      data: [],
      value: []
    }
  },
  mounted () {
    this.getAll()
  },
  computed: mapGetters(['module']),
  methods: {
    getAll () {
      getHasauth().then(res => {
        this.data = res.data.data
      })
    },
    getData () {
      getQuickentry().then(res => {
        this.rk = res.data.data
      })
    },
    updateBtn () {
      this.value = this.rk.map(res => res.menuId)
      this.visible = true
    },
    close (flag) {
      if (flag === true) saveQuickentry(this.value).then(res => {
        this.getData()
        this.visible = false
      })
      else this.visible = false
    }
  }
}
</script>

<style lang="scss">
.kuaijie-dialog {
  .el-transfer-panel__body {
    .el-input {
      width: auto !important;
      margin: 10px;
      input {
        height: 28px;
        font-size: 12px;
      }
    }
  }
  .el-checkbox__label {
    font-size: 12px !important;
  }
}
</style>

<style lang="scss" scoped>
.no-data {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  height: 100%;
  img {
    margin-bottom: 10px;
  }
}
.kuaijie {
  &-title {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 24px);
    .title-span {
      font-size: 14px !important;
      &:nth-child(2) {
        font-weight: bold;
        margin-left: 5px;
      }
    }
  }
  &-warp {
    height: calc(100% - 10px);
    overflow: auto;
    margin: 10px 0;
  }
  &-button {
    color: #808080;
    margin: 5px;
    margin-left: 0 !important;
  }
}
</style>